<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
      background: red;
      color: #fff;
      width: 10px;
    }
</style>
<body>
    <div>
      我的宽度是10px
    </div>
</body>
</html>
<script>
  // 不管是js 还是 jq 都是用的 mvc 模式
  // m => model 数据 v => view 代表视图，c => controller 控制
//   let num = 10;
//   let dom = document.querySelector('div');
//   // setInterval 定时器
//   setInterval(() => {
//     num++;
//     dom.style.width = `${num}px`;
//   },1000)



// let obj = {
//   name: '太子',
//   age: 19
// };
// // defineProperty 对象的数据劫持属性 第一个 参数 就是要劫持的对象。 第二个参数 要劫持的对象的 属性名字。第三个 是一个 对象集合，里面是 option
// Object.defineProperty(obj,'name',{
//   get(){ // 当去使用这个 属性值的时候，就会触发 这个方法；
//     console.log('dfghjkl;');
//     return '狸猫'
//   },
//   set(val){ // 设置的时候会触发
//     console.log(val);
//   }
// })
// obj.name = '李四'
// console.log(obj.name);
// console.log(obj.age);


let dom = document.querySelector('div');

let data = {
  num: 10
};
let number = 10;
setInterval(() => {
  number++;
  data.num = number;
},1000)
Object.defineProperty(data,'num',{
   set(val){
    dom.style.width = `${val}px`;
   },
   get(){
     return number;
   }
})

// 构造函数；
function Star(val){ // 习惯上首字母大写
   this.name = val;
}

let obj1 = new Star('刘单');
console.log(obj1);


</script>